import React, { CSSProperties } from 'react'
import { UdSidebar } from '../../../index'
import Search from 'antd/lib/input/Search'

// 为了让例子界面更好看写的样式。实际请根据自己情况来。
let styles: {
  [key in string]: CSSProperties
} = {
  wrap: {
    height: '400px', display: 'flex', position: 'relative'
  },
  sidebarContent: {
    display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%'
  }
}

const Demo = () => {
  return <div style={styles.wrap}>
    <UdSidebar
      title={<>
        <Search style={{ width: '100%', margin:'0 6px' }}/>
      </>}
      footer={<>
        <div>底部内容</div>
      </>}>
      <div style={styles.sidebarContent}>侧边栏主体内容</div>
    </UdSidebar>
  </div>
}

export default Demo
